<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Blasteroids!</title>
        <style>
            canvas {
                width: 1200px;
                border:2px solid white;
                margin:0px auto;
            }
            div.controls {
                font-family: sans-serif;
                background-color:black;
                margin:0px;
                padding:3px;
                padding-right:10px;
            }
            div.player1{
                color: #007FFF;
                padding-right:50px;
            }
            div.player2{
                color:#FDFD96;
                padding-right:50px;
            }
        </style>
    </head>
    <body bgcolor="black">
        <div style="text-align:center;">
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
            <script type="text/javascript" src="script/SmokeParticle.js"></script>
            <script type="text/javascript" src="script/Bullet.js"></script>
            <script type="text/javascript" src="script/Polygon.js"></script>
            <script type="text/javascript" src="script/Point.js"></script>
            <script type="text/javascript" src="script/Ship.js"></script>
            <script type="text/javascript" src="script/Star.js"></script>

            <script type="text/javascript">
                //add the canvas
                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                canvas.width = 1200;
                canvas.height = 600;
                document.body.appendChild(canvas);
                var objects = new Array();
                var collision = false;
                var gameStarted = false;
            
                var menuReady = false;
                var menu = new Image();
                
                var players = new Array();
                
                menu.onload = function () {
                    menuReady = true;
                };
                menu.src = 'images/title.png';
            
                Array.prototype.remove = function(from, to) {
                    var rest = this.slice((to || from) + 1 || this.length);
                    this.length = from < 0 ? this.length + from : from;
                    return this.push.apply(this, rest);
                };
            
                var keysDown = {};
                addEventListener("keydown", function (e) {
                    if(gameStarted == false){
                        startGame();
                        gameStarted = true;
                    }/*
                    if(e.keyCode == 85){
                        if(canvas.webkitRequestFullScreen) {
                            canvas.webkitRequestFullScreen();
                        }
                        else {
                            canvas.mozRequestFullScreen();
                        }            
                    }*/
                    keysDown[e.keyCode] = true;
                }, false);

                addEventListener("keyup", function (e) {
                    delete keysDown[e.keyCode];	
                }, false);

                // Update game objects
                var update = function (modifier) {
                    var max = objects.length;
                
                    for(var i=0; i<players.length; i++){
                        if(!players[i].dead){
                            for(var j=0; j<players.length; j++){
                                if(j!=i){
                                    var bulletLength = players[j].bullets.length;
                                    for(var k=0; k<bulletLength; k++){
                                        if(players[i].contains(new Point(players[j].bullets[k].x,players[j].bullets[k].y) )){
                                            players[i].destroy();
                                            players[j].scorePoint();
                                        }
                                    }
                                }
                            }
                        }
                    }
                    
                    for(var i=0; i<max; i++){
                        if(objects[i].update){
                            objects[i].update(modifier, keysDown);
                        }
                    }
                };

                // Draw everything
                var render = function () {
                    //ctx.drawImage(bgImage, 0, 0);
                    ctx.fillStyle = '#000000';
                    ctx.fillRect(0, 0, canvas.width, canvas.height);
                    //player1.draw(ctx);
              
                    var max = objects.length;
                    for(var i=0; i<max; i++){
                        objects[i].draw(ctx);
                    }
                    if(!gameStarted && menuReady){
                        ctx.drawImage(menu, (canvas.width/2)-(menu.width/2),(canvas.height/2)-(menu.height/2) );
                    }
                };

                // The main game loop
                var main = function () {
                    var now = Date.now();
                    var delta = now - then;
                
                    update(delta / 1000);
                    render();
                    then = now;
                };
                
                // The main game loop
                var startGame = function () {
                    var player1 = new Ship(200,200, 0, canvas, new Array(38, 37, 39, 40,  13), new Point(0+10, 0+20), 'ship1.png', 'ship1Acc.png', '#007FFF', 'Enter');
                    var player2 = new Ship(800,400, Math.PI, canvas,  new Array(87, 65, 68, 83,  81), new Point(0+10, canvas.height-10), 'ship2.png', 'ship2Acc.png', '#00E0A1', 'Q');
                    
                    var player3 = new Ship(200,200, 0, canvas, new Array(104, 100, 102, 101,  103), new Point(canvas.width-200, 0+20), 'ship3.png', 'ship3Acc.png', '#C8DE46', '7');
                    var player4 = new Ship(800,400, Math.PI, canvas,  new Array(73, 74, 76, 75, 85), new Point(canvas.width-200, canvas.height-10), 'ship4.png', 'ship4Acc.png', '#A200D4', 'U');
                    
                    players.push(player1, player2, player3, player4);
                    for(var i=0; i<players.length; i++){
                        objects.push(players[i]);
                    }
                };
                
                for(var i=0; i<100; i++){
                    objects.push(new Star(canvas.width, canvas.height));
                }
                
                var then = Date.now();
                setInterval(main, 1); // Execute as fast as possible
            </script>
        </div><!--
        <div class="controls player1">
            Player 1 controls-> forward: up left: left right: right shoot: down respawn: Enter
        </div>
        <div class="controls player2">
            Player 2 controls: forward: W left: A right: D shoot: S respawn: Q
        </div>-->
    </body>
</html>
